<template>
	<view class="list-container">
		<van-search :value="params['项目名称']" placeholder="请输入小区名称筛选" show-action @change="handleChange"
			@search="onSearch" @cancel="onCancel" />
		<!-- <view class="search">
			<view class="s-type">
				<dean-popover direction="right" modalLeftPos="6rpx" @select="selectType" :btnList="typeList" chooseText="优先级" isShowIcon></dean-popover>
			</view>
			<my-popover ref="myPopover" :active="active" direction="right" modalLeftPos="6rpx" @select="selectType"
				:btnList="typeList" chooseText="筛选"></my-popover>
			<view class="s-arrow"></view>
			<view class="search-box">
				<view class="icon">
					<image src="../../static/icon/search.png"></image>
				</view>
				<input @confirm="handleSearch" v-model="searchText" type="text" class="search-input"
					confirm-type="search" placeholder="请输入小区名称筛选">
			</view>
			
			<my-popover ref="myPopover" :active="active"  modalLeftPos="-90rpx" @select="selectType"
				:btnList="statusList" chooseText="状态"></my-popover>
				<view class="s-arrow"></view>
			
		</view> -->
		<view v-if="projectList.length">
			<view v-for="item in projectList" :key="item['项目id']">
				<van-cell center :title="item['项目名称']" size="large" link-type="navigateTo"
					:url="`/assessSystem/villageAssess/villageAssess?id=${item['项目id']}`" is-link
					:value="`${item['已考核事项']}/${item['总考核事项']}`" />
			</view>
		</view>
		<van-empty v-else description="暂无考核"></van-empty>
		<uni-load-more v-if="projectList.length >= 15" :status="status" />
	</view>
</template>

<script>
	import MyPopover from '@/myComponents/my-popover/dean-popover.vue'
	export default {
		components: {
			MyPopover
		},
		data() {
			return {
				haveMore: true,
				status: 'more',
				params: {
					项目名称: '',
					社区id: this.$config.groupId,
					pagination: {
						current: 1,
						pageSize: 15
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				projectList: [],
				url: '/assessSystem/index/index?id=1',
				searchText: '',
				typeList: ['全部', '流动人口', '常住人口'],
				statusList: ['全部', '未完成', '已完成'],
				timerId: null
			}
		},
		onLoad() {
			// this.projectList = uni.getStorageSync('projectList')
			this.getProjectList()
		},
		onReachBottom() {
			if(this.haveMore) {
				this.params.pagination.current++
				this.status = 'loading'
				this.getMoreProjList()
			}
		},
		methods: {
			onCancel() {
				console.log('触发')
			},
			onConfirm() {
				console.log('触发')
			},
			handleChange(event) {
				this.timerId && clearTimeout(this.timerId)
				this.timerId = setTimeout(() => {
					this.params.项目名称 = event.detail
					this.getProjectList()
				}, 400)
			},
			getProjectList() {
				this.$http2.post('/transactionCompete/projiteminfo', this.params).then(res => {
					if (res.code === 10000) {
						// console.log(res)
						this.projectList = res.data.list
					}
				})
			},
			getMoreProjList() {
				this.$http2.post('/transactionCompete/projiteminfo', this.params).then(res => {
					console.log(res)
					if(res.code === 10000) {
						res.data.list = res.data.list || []
						this.projectList = [...this.projectList, ...res.data.list]	
						if(this.projectList.length >= res.data.total) {
							this.status = 'noMore'
							this.haveMore = false
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.van-cell__value {
		font-size: 28rpx !important;
	}

	.list-container {
		background-color: #f5f5f5;
	}

	.search {
		// margin-left: 100rpx;
		width: 750rpx;
		height: 96rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		margin-bottom: 20rpx;

		.s-arrow {
			width: 16rpx;
			height: 16rpx;
			border-top: 2rpx solid #3080FB;
			border-right: 2rpx solid #3080FB;
			transform: rotate(135deg);
			margin-left: 10rpx;
			margin-top: -4rpx;
		}


		.search-box {
			position: relative;
			width: 560rpx;
			height: 56rpx;
			margin: 0 30rpx;
			padding-left: 17rpx;
			padding-right: 18rpx;
			// background-color: pink;
			border: 2rpx solid #595959;
			border-radius: 28rpx;
			display: flex;

			.icon {
				width: 50rpx;
				height: 46rpx;
				margin-top: 3rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.search-input {
				width: 434rpx;
				height: 100%;
				color: #999;
			}

			.pop {
				position: absolute;
				right: 60rpx;
			}

			.clear-icon {
				position: absolute;
				right: 12rpx;
				width: 42rpx;
				height: 42rpx;
				color: #fff;
				border-radius: 50%;
				line-height: 40rpx;
				text-align: center;
				margin-top: 4rpx;
				// align-items: center;
				// position: absolute;
				// right: 130rpx;
				// top: 24rpx;
				background-color: #c8c9cc;
			}
		}

		.add {
			font-size: 32rpx;
			font-weight: bold;
			color: #5094FF;
			margin-right: 4rpx;
		}
	}
</style>
